<template>
  <div class="p-2">
    <div class="display-flex p-2 mt-1 pb-1 ai-center border-b">
      <i class="iconfont icon-arrow-right font-xl primary" @click="$router.go(-1)"></i>
      <strong class="flex-1 font-m blue">{{articleData.title}}</strong>
      <div class="grey font-s">{{articleData.createdAt | dataFormat}}</div>
    </div>
    <div class="at-body mt-3 pr-4 pl-4" v-html="articleData.body"></div>
    <div class="bottom mt-5">
      <div class="pr-4 pl-4">
        <div>
          <i class="iconfont icon-menu1 font-xs"></i>
          <span class="blue font-xl pl-1">相关资讯</span>
        </div>
        <div class="mt-3">
          <div class=" display-flex p-1">
            <div class="flex-1 text-ellipsis font-l">王者之战，一触即发！ ——王者荣耀城市联赛暨江苏联通5G先锋挑战赛常规赛正式开赛</div>
            <span class="grey pl-4">2020-05-15</span>
          </div>
          <div class="display-flex p-1">
            <div class="text-ellipsis flex-1 font-l">刘禅体验服半重做，正式服上线后该如何快速上分，如何当个好辅助</div>
            <span class="grey pl-4">2020-05-15</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import moment from "moment";

  export default {
    name: "Articles",
    props:{
      id:{type:String}
    },
    data(){
      return {
        articleData:{}
      }
    },
    created() {
      this.fetch()
    },
    methods:{
      async fetch(){
        const res = await this.$http.get(`articles/${this.id}`)
        this.articleData = res.data
      }
    },
    filters:{
      dataFormat(value){
        return moment(value).format('YYYY-MM-DD')
      }
    },
  }
</script>

<style lang="scss">
.at-body{
  line-height: 2;
  p {
    font-size: 1.25rem;
    line-height: 2;

  }
  strong{
    font-size: 1.5rem;
  }
}
</style>